<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <ul>
        <li v-for="(list, index) in data" :key="index">
          <slot name="list">{{ list.name }}</slot>
        </li>
      </ul>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: "孙悟空" },
        { id: 2, name: "猪八戒" },
        { id: 3, name: "唐僧" },
        { id: 4, name: "沙僧" },
        { id: 5, name: "小白龙" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
ul {
  li {
    text-decoration: none;
    list-style: none;
  }
}
</style>
